<template>
  <div flex flex-a-c p-16px>
    <div
      text-center
      class="title"
      cursor-pointer
      @click="handleClick(item, index)"
      v-for="(item, index) in props.res.data.category"
      :key="index"
    >
      <div flex flex-items-center flex-col>
        <div
          font-bold
          text-16px
          :style="{
            color:
              current === index
                ? props.res.data.activeTColor
                : props.res.data.titleColor
          }"
        >
          {{ item.title }}
        </div>
        <div
          h-3px
          w-33px
          m-t-3px
          rounded-2px
          :style="{
            backgroundColor:
              current === index ? props.res.data.lineColor : 'transparent'
          }"
        ></div>
      </div>
    </div>
  </div>
  <div>
    <!-- flex justify-center flex-items-center h-100px text-gray -->
    <img w-full src="../assets/func_list.png" alt="" />
    <!-- <tpl_goods_only
      :model="props.res.data.category[current].goods"
      :res="props.res"
    /> -->
    <!-- 动态数据内容样式请在移动设备预览 -->
    <!-- 需要写两个组件, 一行一列(按照文章设置); 一行两列(新组件) -->
  </div>
</template>

<script setup lang="ts">
import tpl_goods_only from './tpl_goods_only.vue'
import { ref } from 'vue'
const props = defineProps<{
  res: any
}>()

const current = ref<number>(0)

function handleClick(val: any, index: number) {
  current.value = index
  // TODO: 需调用接口获取数据, 填入内容展示组件
}
</script>

<style scoped>
.title {
  width: 25%;
}
</style>
